<template>
  <div class="app-container">
    <el-card style="margin-bottom:10px;">
      <div slot="header" class="clearfix">
        <span style="font-size:18px;"><b>请先选择题目属性</b></span>
        <el-button style="float: right; padding: 3px 0" type="text"></el-button>
      </div>
      <b>请选择对应课程：</b>
      <el-select v-model="selectCourseId" placeholder="请选择对应课程" @change="courseChange">
        <el-option
          v-for="(item,index) in courses"
          :key="index"
          :label="item.courseName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <b>请选择知识点：</b>
      <el-cascader
        expand-trigger="hover"
        ref="cascaderKnowledge"
        :options="knowledges"
        v-model="selectKnowledge"
        :props="props"
        filterable
      >
      </el-cascader>

      <b>请选择对应难度</b>
      <el-select v-model="difficulty" placeholder="请选择难易程度">
        <el-option
          v-for="(index) in 5"
          :key="index"
          :label="index"
          :value="index">
        </el-option>
      </el-select>
      <b>请选择对应分值</b>
      <el-select v-model="score" placeholder="请选择分值">
        <el-option
          v-for="(index) in 50"
          :key="index"
          :label="index"
          :value="index">
        </el-option>
      </el-select>
    </el-card>

    <div class="container" style="display: flex;width: 100%;flex-direction: row;">

      <!--<div style="border:1px green solid;min-height: 100px;width: 200px">-->
      <!---->
      <!--</div>-->
      <el-card class="box-card" style="width: 200px;">
        <div v-for="item in questionType" class="text item" @click="addQuestion(item)"> {{item.name}}</div>
      </el-card>
      <el-card style="min-height: 100px;width: 100%;margin-left: 5px">
        <div class="questionClass" v-for="(question,index) in questions">
          <text-dan @on-delete-question="deleteQuestion" v-if="question.questionType==1" :qIndex="index" :qBody="question.questionBody"></text-dan>
          <text-duo @on-delete-question="deleteQuestion" v-if="question.questionType==2" :qIndex="index" :qBody="question.questionBody"></text-duo>
          <text-pan-duan @on-delete-question="deleteQuestion" v-if="question.questionType==3" :qIndex="index" :qBody="question.questionBody"></text-pan-duan>
          <text-tian-kong @on-delete-question="deleteQuestion" v-if="question.questionType==4" :qIndex="index" :qBody="question.questionBody"></text-tian-kong>
          <text-wenda @on-delete-question="deleteQuestion" v-if="question.questionType==5" :qIndex="index" :qBody="question.questionBody"></text-wenda>
        </div>
        <div style="margin-top:10px;">
          <el-button @click="showQuestion">保存题目</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import TextDan from '@/components/Examination/danxuan'
import TextDuo from '@/components/Examination/duoxuan'
import TextPanDuan from '@/components/Examination/panduan'
import TextTianKong from '@/components/Examination/tiankong'
import TextWenda from '@/components/Examination/wenda'
import {listCourse } from "@/api/teach/course"
import {listKnowledge_points, treeKnowledge_points} from "@/api/teach/knowledge_points";
import { batchAddQuestion } from '@/api/teach/question'
export  default {
  components:{TextDan,TextDuo,TextPanDuan,TextTianKong,TextWenda},
  data(){
    return {
      props: {
        value: 'id',
        label:"name",
        children: 'children'
      },
      courses:[],
      knowledges:[],
      selectKnowledge:null,
      selectCourseId:null,
      difficulty:1,
      score:2,
      questionType:[
        {
          name:'单选题',
          type:1,
        },
        {
          name:'多选题',
          type:2
        },
        {
          name:'判断题',
          type:3
        },
        {
          name:'填空题',
          type:4
        },
        {
          name:'问答题',
          type:5
        },
      ],
      questions:[
        {
          questionType:1,
          questionBody:{
            title:"我是单选题题目",
            rightAnswerId:1,
            answers:[
              {
                id:1,
                atitle:'选项',
                isEdit:false
              },
              {
                id:2,
                atitle:'选项',
                isEdit:false
              }
            ]
          }
        }
      ]
    }
  },
  mounted:function(){
    listCourse({pageSize:100000,pageNum:1}).then(response => {
      this.courses = response.rows;
    })
  },
  methods:{
    courseChange:function(data){
      let d = {
        courseId:data
      }
      treeKnowledge_points(d).then(response => {
        // const {data} = response.rows;
        //let d = [];
        //d.push(data);
        this.knowledges = this.handleTree(response.data, "id");
        // this.knowledges = response.rows;
      })
    },
    showQuestion:function(){
      let data = [];
      let index = 0;
      //将知识点的名称保存到数据库
      let index2 = 0;
      let knowledgeNames = "";
      console.log(this.knowledges[0]);
      console.log(this.selectKnowledge);
      if(this.selectKnowledge !=null){
        console.log(this.$refs['cascaderKnowledge'].getCheckedNodes());
        knowledgeNames = this.$refs['cascaderKnowledge'].getCheckedNodes()[0].pathLabels;
      }else{
        alert("请选择知识点");
        return ;
      }
      console.log("knowledgeNames" + knowledgeNames);
      if(this.selectCourseId == 0){
        alert("请选择课程");
        return ;
      }
      let index3 = 0;
      let courseName  = "";
      for(index3 in this.courses){
        if(this.courses[index3].id == this.selectCourseId){
          courseName = this.courses[index3].courseName;
        }
      }

      for(index in this.questions){
        let dataItem  = {
          courseId:this.selectCourseId,//课程主键
          courseName:courseName,//课程名称
          title:this.questions[index].questionBody.title,//题目标题
          answer:this.questions[index].questionBody.rightAnswerId, //答案
          answerOptions:JSON.stringify(this.questions[index].questionBody.answers), //答案选项
          answerKeys:this.questions[index].questionBody.answerKeys,//答案解析
          score:this.score,//分值
          type:this.questions[index].questionType,// 题目类型
          knowledgePointId:this.selectKnowledge.join(","),//绑定知识点
          knowledgePointName:knowledgeNames.join(","),//绑定知识点名称
          difficulty:this.difficulty//难度

        };
        data.push(dataItem);
      }
      console.log(data);
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      batchAddQuestion({"questions":JSON.stringify(data)}).then(response => {
        console.log(response);
        loading.close();
        //添加完毕之后，跳转到我的页面
        this.$router.push({path:'/teach/question/index'});
      });
      //console.log(this.questions);
    },
    deleteQuestion:function(e,qIndex){
      this.questions.splice(qIndex,1);
    },
    addQuestion:function(item){
      if(item.type == 1){
        let question = {
          questionType:item.type,
          questionBody:{
            title:"我是单选题题目",
            rightAnswerId:1,
            answerKeys:'',
            answers:[
              {
                id:1,
                atitle:'选项1',
                isEdit:false,
                imageUrl:''
              },
              {
                id:2,
                atitle:'选项2',
                isEdit:false,
                imageUrl:''
              }
            ]
          }
        };
        this.questions.push(question);
      }else if(item.type==2){
        let question = {
          questionType:2,
          questionBody:{
            title:"我是多选题题目",
            rightAnswerIds:[1],
            answerKeys:"",
            answers:[
              {
                id:1,
                atitle:'选项1',
                isEdit:false,
                imageUrl:''
              },
              {
                id:2,
                atitle:'选项2',
                isEdit:false,
                imageUrl:''
              }
            ]
          }
        };
        this.questions.push(question);
      }else if(item.type == 3){
        let question = {
          questionType:item.type,
          questionBody:{
            title:"我是判断题题目",
            rightAnswerId:1,
            answerKeys:'',
            answers:[
              {
                id:1,
                atitle:'对',
                isEdit:false
              },
              {
                id:2,
                atitle:'错',
                isEdit:false
              }
            ]
          }
        };
        this.questions.push(question);
      }else if(item.type == 4){
        let question = {
          questionType:item.type,
          questionBody:{
            title:"我是填空___题题目____",
            rightAnswerId:1,
            answerKeys:'',
            answers:[
              {
                id:1,
                atitle:'填空一',
                isEdit:false,

              },
              {
                id:2,
                atitle:'填空二',
                isEdit:false
              }
            ]
          }
        };
        this.questions.push(question);
      }else if(item.type == 5){
        let question = {
          questionType:item.type,
          questionBody:{
            title:"我是问答题题目",
            rightAnswerId:1,
            answerKeys:'',
            answers:''
          }
        };
        this.questions.push(question);
      }
    }
  }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  cursor:pointer;
  margin-top:5px;
  border-bottom: 1px solid #CCC;
  margin-left: 0;
}
.questionClass{
  border-bottom: 1px solid #CCC;
}
</style>
